<script language="javascript">
    // add files
    $(document).ready(function() {
        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');
   
        $('#formupload').ajaxForm({
            dataType:  'json',
            beforeSend: function() {
                $('.progress').show();
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function(xhr) {
                $('.progress').hide();
                if('Ups !! Tipo de archivo no soportado... :(' == xhr.responseText || 'El archivo pesa demasiado, maximo 5 Mb :)' == xhr.responseText){
                    $("#msg_error").show();
                    $(".alert_error").html(xhr.responseText);
                }
            },
            success: function(data){
                msg = '\"Esta seguro que quiere eliminar el archivo ?\"';
                $("#result-attachment").append('<div id="attachment_'+ data.id +'" class="message">'+
                    '<div style="width: 80%; float: left;">'+
                    '<p><img width="16" src="<?php echo $this->baseUrl() ?>/public/styles/admin/images/icon_files/_'+data.extension+'.png"/> '+data.name_original+'</p>'+
                    '</div>'+
                    '<div style="width: 20%; float: left; margin-top: 15px;">'+
                    '<a class="viewAttach" rel="'+ data.id +'" href="#">'+
                    '<img src="<?php echo $this->baseUrl() ?>/public/styles/admin/images/icn_alert_info.png"/>'+
                    '</a>'+
                    '<a class="delAttach" onclick="return confirm (\'Esta seguro que quiere eliminar el archivo ? \')" rel="'+ data.id +'" href="#">'+
                    '<img src="<?php echo $this->baseUrl() ?>/public/styles/admin/images/icn_trash.png"/>'+
                    '</a>'+
                    '</div>'+
                    '</div>');
              
                $('#myfile').val('');
                $('#description').val('');
            } 
        }); 
        //Delete files
        $(document).on("click", "a.delAttach", function(){ 
            idAttach = $(this).attr('rel');
            $.ajax({
                type: "GET",
                url: "<?php echo $this->baseUrl() ?>/attachment/index/delete-attachment/id/"+idAttach,
                success: function( strData ){
                    $('#attachment_'+idAttach).remove();
                    $("#date").text('');
                    $("#link").text('');
                    $("#description_view").text('');
                }
            });
        });
        //View Details File
        $(document).on("click", "a.viewAttach", function(){ 
            idAttach = $(this).attr('rel');
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "<?php echo $this->baseUrl() ?>/attachment/index/view-attachment/id/"+idAttach,
                success: function( data ){
                    $('#viewContent').show();
                    $("#date").text(data.create_date);
                    $("#tipo_file").html('<img src="<?php echo $this->baseUrl() ?>/public/styles/admin/images/icon_files/_'+data.extension+'.png"/>');
                    $("#link").html('<a href="<?php echo $this->baseUrl() ?>/attachment/index/download-attachment/id/'+idAttach+'">'+data.name_original+'</a>');
                    $("#description_view").text(data.description);
                }
            });
        });
    });
</script>
<style>
    .progress { position:relative; width:100px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
    .bar { background-color: #B4F5B4; width:0%; height:10px; border-radius: 3px; }
    .percent { position:absolute; display:inline-block; top:-2px; left:48%; }
</style>

<?php
// IMPORTANTE
// Aqui tenemos que obtener  el ID del proyecto/orden 
// para mostrar todos sus archivos
?>

<article class="module width_half">
    <header><h3>Subir un archivo a la Orden actual</h3></header>
    <div class="module_content">
        <form class="formstyle" id="formupload" action="<?php echo $this->url(array('module'=>'attachment', 'controller'=>'index', 'action' => 'add-attachment')); ?>" method="post" enctype="multipart/form-data">  
            <input type="hidden" id="id_order" name="id_order" value="<?php echo $this->id_order; ?>" />
            <p>
                <span style="font-style: italic;">* Archivos soportados: gif, jpg, jpeg, png, tif, doc, docx, xls, xlsx, ppt, pptx, pps, ppsx, psd, txt, rtf</span>
            </p>
            <p>
                <label for="myfile">Elegir archivo a subir </label>
                <input type="file" name="myfile" id="myfile"/>
            </p>    
            <p>
                <label for="description">Descripci&oacute;n</label>
                <textarea id="description" name="description"></textarea>
            </p>
            <div class="progress" style="display: none">
                <div class="bar"></div >
                <div class="percent">0%</div >
            </div> 
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <div class="submit_link">
                <input type="submit" value="Subir Attachment"/>
                <a class="button" href="<?php echo $this->url(array('module'=>'orden', 'id' => null)) ?>">Close</a>
            </div>
        </form>
    </div>
    <footer></footer>
</article>

<article class="module width_quarter">
    <header><h3>Lista de archivos actuales</h3></header>
    <div class="message_list" style="height: 225px">
        <div class="module_content" id="result-attachment">

            <?php foreach ($this->resultAttachment as $attachment) : ?>
                <div class="message" id="attachment_<?php echo $attachment->id; ?>">
                    <div style="width: 80%; float: left;">
                        <p>
                            <img width="16" src="<?php echo $this->baseUrl() ?>/public/styles/admin/images/icon_files/_<?php echo $attachment->extension; ?>.png"/>
                            <?php echo $attachment->name_original; ?>
                        </p>
                    </div>
                    <div style="width: 20%; float: left; margin-top: 15px;">
                        <a class="viewAttach" rel="<?php echo $attachment['id'] ?>" href="#">
                            <img src="<?php echo $this->baseUrl() ?>/public/styles/admin/images/icn_alert_info.png"/>
                        </a>
                        <a class="delAttach" onclick="return confirm ('Esta seguro que quiere eliminar el archivo ?')" rel="<?php echo $attachment['id'] ?>" href="#">
                            <img src="<?php echo $this->baseUrl() ?>/public/styles/admin/images/icn_trash.png"/>
                        </a>
                    </div>
                </div>
            <?php endforeach; ?>

        </div>
    </div>
</article>

<article class="module width_half" id="viewContent" style="display: none">
    <header><h3>Detalle del archivo</h3></header>
    <div class="module_content">
        <div id="viewDetail">
            <p>
                <label><b>Tipo de archivo :</b></label>
                <span id="tipo_file"></span>
            </p> 
            <p>
                <label><b>Fecha :</b></label>
                <span id="date"></span>
            </p>   
            <p>
                <label><b>Link de descarga :</b></label>
                <span id="link"></span>
            </p>    
            <p>
                <label for="description_view"><b>Descripci&oacute;n :</b></label>
                <span id="description_view"></span>
            </p>
        </div>
    </div>
    <footer></footer>
</article>